<template>
  <div>
    <el-button 
      type="primary" 
      icon="el-icon-arrow-left"
      @click="$router.push('/admin')"
      style="margin-bottom: 20px">
      返回
    </el-button>
    <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="图书编号">
        <el-input v-model="ruleForm.id" readOnly></el-input>
      </el-form-item>
      <el-form-item label="图书名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publish">
        <el-input v-model="ruleForm.publish"></el-input>
      </el-form-item>
      <el-form-item label="页数" prop="pages">
        <el-input-number v-model="ruleForm.pages" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number v-model="ruleForm.price" :min="0" :precision="2"></el-input-number>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input type="textarea" v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item label="书架ID" prop="bookcaseid">
        <el-input-number v-model="ruleForm.bookcaseid" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="是否可用" prop="abled">
        <el-switch v-model="ruleForm.abled" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        name: '',
        author: '',
        publish: '',
        pages: 1,
        price: 0,
        description: '',
        bookcaseid: 1,
        abled: 1
      },
      rules: {
        name: [
          { required: true, message: '图书名称不能为空', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '作者不能为空', trigger: 'blur' }
        ],
        publish: [
          { required: true, message: '出版社不能为空', trigger: 'blur' }
        ],
        pages: [
          { required: true, message: '页数不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' }
        ],
        bookcaseid: [
          { required: true, message: '书架ID不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.put('http://localhost:8181/book/update', this.ruleForm).then(function(resp) {
            if (resp.data == 'success') {
              _this.$alert('《' + _this.ruleForm.name + '》修改成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/admin/BookManage');
                }
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    const _this = this;
    axios.get('http://localhost:8181/book/findById/' + this.$route.query.id).then(function(resp) {
      _this.ruleForm = resp.data;
    });
  }
};
</script>
